<template>
  <div class="rich-text-editor">
    <div class="editor_toolbar">
      <Toolbar
        style="margin: 0 auto; max-width: 1321px"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
    </div>
    <div class="editor_content">
      <div class="content">
        <div class="title">
          <input type="text" v-model="editForm.title" placeholder="标题..." />
        </div>
        <div class="editor" @click.self="editorEvent">
          <Editor
            v-model="editForm.content"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, reactive, shallowRef } from "vue";

import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { IDomEditor, IToolbarConfig } from "@wangeditor/editor";

// 编辑器模式
const mode = "default";

// 编辑器实例
const editorRef = shallowRef<IDomEditor>();

// 编辑内容
interface RichText {
  title: string;
  content: string;
}
const editForm: RichText = reactive({
  title: "",
  content: "",
});

// 编辑器工具栏配置
const toolbarConfig: Partial<IToolbarConfig> = {
  excludeKeys: ["fullScreen", "group-image", "group-video"],
  insertKeys: {
    index: 22,
    keys: ["uploadImage", "uploadVideo"],
  },
};

// 编辑器配置
interface InsertFnType {
  (url: string, alt: string, href: string): void;
}
const editorConfig = {
  placeholder: "请输入内容...",
  // 是否支持滚动
  scroll: false,
  MENU_CONF: {
    uploadImage: {
      // 自定义上传
      async customUpload(file: File, insertFn: InsertFnType) {
        console.log(file, insertFn);
      },
    },
    uploadVideo: {
      // 自定义上传
      async customUpload(file: File, insertFn: InsertFnType) {
        console.log(file, insertFn);
      },
    },
  },
};

/**
 * 编辑区域点击事件
 */
const editorEvent = () => {
  const editor = editorRef.value;
  if (editor == null) return;
  // 聚焦到编辑器
  editor.focus(true);
};

/**
 * 编辑器创建完毕时的回调
 */
const handleCreated = (editor: IDomEditor) => {
  // 记录编辑器实例
  editorRef.value = editor;
};

/**
 * 组件销毁时
 */
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  // 销毁编辑器实例
  editor.destroy();
});
</script>

<style lang="scss" scoped>
.rich-text-editor {
  margin: auto;
  width: 100%;
  // height: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;

  .editor_toolbar {
    padding: 10px;
    width: 100%;
    height: auto;
    background-color: #ffffff;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
  }

  .editor_content {
    width: 100%;
    height: 0;
    flex: 1;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;

    .content {
      margin: 20px auto 100px auto;
      padding: 0 50px 50px 50px;
      max-width: 800px;
      background: #ffffff;
      border-radius: 5px;
      box-shadow: 0 2px 10px rgb(0 0 0 / 12%);

      .title {
        padding: 40px 0 20px 0;
        width: 100%;
        height: auto;
        border-bottom: 1px solid #e8e8e8;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;

        input {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
          font-size: 30px;
          border: none;
          outline: none;
          background: transparent;
          box-sizing: border-box;
        }
      }

      .editor {
        margin-top: 20px;
        width: 100%;
        min-height: 900px;
        cursor: text;
      }
    }
  }
}
</style>
